<template>
  <div>
    <div id="part_one">
      <div>
        <span> 省：</span>
        <el-autocomplete class="inline-input"
                         v-model="state1"
                         :fetch-suggestions="querySearch"
                         placeholder="全部省份"
                         suffix-icon="el-icon-arrow-down"
                         @select="handleSelect"></el-autocomplete>
      </div>
      <div>
        <span>订单日期:</span>
        <el-date-picker v-model="value1"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
        </el-date-picker>
      </div>
    </div>
      <div id="part_two">
        <div class="pt_div">
          <span>合伙人总销量</span>
          <span>3</span>
        </div>
        <div class="pt_div">
          <span>大客户总销量</span>
          <span>119</span>
        </div>
      </div>
      <div id="part_three">
        <span>销量排序:</span>
        <el-radio v-model="radio" label="1">全部</el-radio>
        <el-radio v-model="radio" label="2">降序</el-radio>
        <el-radio v-model="radio" label="3">升序</el-radio>
      </div>
      <div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="合伙人" name="first">
            <el-table :data="tableData"
                      border
                      style="width: 100%">
              <el-table-column prop="date"
                               label="省"
                               width="180">
              </el-table-column>
              <el-table-column prop="address"
                               label="销量">
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="大客户" name="second">
            <el-table :data="tableData1"
                      border
                      style="width: 100%">
              <el-table-column prop="date"
                               label="省"
                               width="180">
              </el-table-column>
              <el-table-column prop="address"
                               label="销量">
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </div>
  </div>
</template>
<style scoped>
 .is-reverse {
    transform: rotate(180deg);
  }
  .el-icon-arrow-down {
    color: #c0c4cc;
    font-size: 14px;
    transition: transform .3s;
    transform: rotate( 0deg );
    cursor: pointer;
  }
  #part_one{
      display:flex;
      flex-wrap:nowrap;
      justify-content:space-between;
      width:900px;
  }
  #part_two{
   display:flex;
   margin:30px;
  }
  #part_three{
      margin:30px 0;
  }
  .pt_div {
    text-align: center;
    width: 156px;
    height: 102px;
    padding: 30px;
    box-sizing: border-box;
    border-radius: 5px;
    margin-right: 50px;
  }
    .pt_div:hover {
      background-color: rgb(243,243,243);
      box-shadow: 0 2px 12px 0px rgba(114,65,29,0.24);
      transition: box-shadow .5s;
    }
  .el-dropdown {
    vertical-align: top;
  }

    .el-dropdown + .el-dropdown {
      margin-left: 15px;
    }

  .el-icon-arrow-down {
    font-size: 12px;
  }
</style>
<script>
  export default {
    data() {
      return {
        radio: '1',
        activeName: 'second',
        restaurants: [],
        state1: '',
        state2: '',
        tableData: [{
          date: '四川',
          address: '518'
        }],
        tableData1: [{
          date: '北京',
          address: '518'
        }]
      }
    },
    methods: {
      handleClick() {
        alert('button click');
      },
      handleClick(tab, event) {
        console.log(tab, event);
      },
      querySearch(queryString, cb) {
        var restaurants = this.restaurants;
        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
        // 调用 callback 返回建议列表的数据
        cb(results);
      },
      createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      loadAll() {
        return [
          { "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },
          { "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" },
          { "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },
        ];
      },
      handleSelect(item) {
        console.log(item);
      }
    },
    mounted() {
      this.restaurants = this.loadAll();
    }
  }
</script>




